import React, { useState } from 'react';
import { Layout, message } from 'antd';
import MapComponent from './components/MapComponent';
import ChatSidebar from './components/ChatSidebar';
import { markersApi } from './utils/supabase';
import { Marker } from './types';
import './App.css';

const { Sider, Content } = Layout;

const App: React.FC = () => {
  const [markers, setMarkers] = useState<Marker[]>([]);

  const handleMarkerAdd = async (markerData: Omit<Marker, 'id' | 'createdAt'>) => {
    try {
      // 模拟保存到Supabase
      const newMarker = await markersApi.addMarker(markerData);
      if (newMarker) {
        setMarkers(prev => [...prev, {
          id: newMarker.id,
          lat: newMarker.lat,
          lng: newMarker.lng,
          title: newMarker.title,
          description: newMarker.description,
          createdAt: newMarker.created_at
        }]);
        message.success('标记点已保存');
      }
    } catch (error) {
      console.error('保存标记点失败:', error);
      message.error('保存标记点失败');
    }
  };

  return (
    <Layout style={{ height: '100vh' }}>
      <Content>
        <MapComponent onMarkerAdd={handleMarkerAdd} markers={markers} />
      </Content>
      <Sider
        width={400}
        style={{
          background: '#fff',
          borderLeft: '1px solid #d9d9d9',
        }}
      >
        <ChatSidebar />
      </Sider>
    </Layout>
  );
};

export default App;